<template>
  <el-popover
      placement="bottom-start"
      :width="500"
      trigger="click"
      v-model:visible="visible"
  >
    <template #reference>
      <div class="container">
        <div>{{ placeholder }}</div>
        <div>
          <el-icon-arrowdown :class="{'rotate': visible}"></el-icon-arrowdown>
        </div>
      </div>
    </template>
    <div class="content">
      <el-row style="margin-bottom: 10px">
        <el-col :span="8">
          <el-radio-group v-model="radio">
            <el-radio-button label="按城市"></el-radio-button>
            <el-radio-button label="按省份"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="14" :offset="2">
          <el-select v-model="select"
                     filterable
                     placeholder="请搜索城市"
                     :filter-method="filter"
                     @change="selectChange"
          >
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-col>
      </el-row>
      <template v-if="radio === '按城市'">
        <div class="city">
          <div class="city-item"
               v-for="(item, index) in Object.keys(cities)"
               :key="index"
               @click="clickLetter(item)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template v-for="(value, key) in cities" :key="key">
            <el-row :id="key">
              <el-col :span="2">{{ key }}:</el-col>
              <el-col :span="22" class="city-name">
                <div class="city-name-item"
                     v-for="item in value"
                     :key="item.id"
                     @click="clickCity(item)"
                >
                  <div>{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
      <template v-else>
        <div class="province">
          <div
              class="province-item"
              v-for="(item, index) in Object.keys(provinces)"
              :key="index"
              @click="clickLetter(item)"
          >
            {{ item }}
          </div>
          <el-scrollbar max-height="300px">
            <template v-for="(item, index) in Object.values(provinces)" :key="index">
              <template v-for="(citem, cindex) in item" :key="cindex">
                <el-row :id="citem.id">
                  <el-col :span="3">{{ citem.name }}:</el-col>
                  <el-col :span="21" class="city-name">
                    <div class="city-name-item"
                         v-for="(sitem, sindex) in citem.data"
                         :key="sindex"
                         @click="clickProvince(sitem)"
                    >
                      <div>{{ sitem }}</div>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </template>
          </el-scrollbar>
        </div>
      </template>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch} from "vue";
import city from '../../../lib/city'
import province from '../../../lib/province.json'

let placeholder = ref<string>('请选择')
let visible = ref<boolean>(false)
let radio = ref<string>('按城市')
let select = ref<string>('')
let cities = ref(city.cities)
let provinces = ref(province)
let options = ref([])
let searchValue = ref<string>('')
let cityData = ref([])

let clickLetter = (val) => {
  let el = document.getElementById(val)
  el.scrollIntoView()
}

let emits = defineEmits(['changeCity', 'changeProvince'])

let clickCity = (item) => {
  placeholder.value = item.name
  visible.value = false
  emits('changeCity', item)
}

let clickProvince = (item) => {
  placeholder.value = item
  visible.value = false
  emits('changeProvince', item)
}

let filter = (val) => {
  searchValue.value = val
  cityData.value = Object.values(cities.value).flat(Infinity)
  if (val === '') {
    options.value = arr
  } else {
    if (radio.value === '按城市') {

      options.value = cityData.value.filter(item => {
        return item.name.includes(val) || item.spell.includes(val)
      })
    } else {
      options.value = cityData.value.filter(item => {
        return item.name.includes(val)
      })
    }
  }
}

let selectChange = (val) => {
  if (val) {
    console.log(cityData)
    let city = cityData.value.find(item => item.id === val)
    console.log(city)
    placeholder.value = city.name
    visible.value = false
    select.value = ''
    if(radio.value === '按城市') {
      emits('changeCity', city)
    } else {
      emits('changeProvince', city)
    }
  }
}

onMounted(() => {
  let arr = Object.values(cities.value).flat(Infinity)
  options.value = arr
  cityData.value = arr
})

watch(() => searchValue.value, value => {
  filter(value)
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}

.rotate {
  transform: rotate(180deg);
}

svg {
  width: 1em;
  height: 1em;
  margin-left: 5px;
  position: relative;
  top: 2px;
  transition: all 0.25s linear;
}

.content {
  padding: 6px;
}

.city, .province {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;

  &-item {
    width: fit-content;
    padding: 3px 6px;
    margin-right: 8px;
    border: 1px solid #EEE;
    margin-bottom: 8px;
    cursor: pointer;
  }
}

.city-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &-item {
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
  }
}
</style>